<template>
    <div class="schoolHomePageBox">
        <el-container>
            <el-main class="mainBox">

                <div class="card">
                    <div class="title clearFix">
                        <label class="titleName">班级公告</label>
                        <label class="more"
                            @click="$router.push({path:'/class/classWentInto/classBulletin',query:{junmpType: 1,dictype:25}})">更多
                            <i class="el-icon-arrow-right"></i></label>
                    </div>

                    <div class="announcement clearFix">
                        <div class="imgBox">
                            <el-image v-if="otherUserInfo.photo" :src="otherUserInfo.photo | pictureUrl">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <el-image v-else :src="otherUserInfo.img | pictureUrl">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                        <ul class="announcementList">
                            <li class="list" v-if=" articleList25.total > 0 && articleList25.list[0]">
                                <span>{{articleList25.list[0].title}}</span>
                                <div style="overflow-y: scroll;height:160px">
                                <p style="margin-left:30px"
                                    v-html="articleList25.list[0].content?articleList25.list[0].content:''"></p>
                                </div>
                                <span class="time">{{articleList25.list[0].creationtime}}</span>
                            </li>
                            <!-- <li class="list" v-for="(item,index) in articleList25.list" :key="index">
                                <span
                                    @click="$router.push({path:'/class/classWentInto/classBulletin',query:{junmpType: 1,article:item}})">{{item.title}}</span>
                                <span class="time">{{item.creationtime}}</span>
                            </li> -->
                        </ul>
                    </div>
                </div>

                <el-row :gutter="18">
                    <el-col :span="12">
                        <div class="warp">
                            <div class="title clearFix">
                                <label class="titleName">班级文章</label>
                                <label class="more"
                                    @click="$router.push({path:'/class/classWentInto/classPaper',query:{junmpType: 1,dictype:21}})">更多
                                    <i class="el-icon-arrow-right"></i></label>
                            </div>
                            <ul class="inner">
                                <li class="list" v-for="(item, index) in articleList21.list" :key="index">
                                    <span
                                        @click="$router.push({path:'/class/classWentInto/classPaper',query:{junmpType: 1,article:item}})">{{item.title}}</span>
                                    <span class="time">{{item.creationtime}}</span>
                                </li>
                            </ul>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="warp">
                            <div class="title clearFix">
                                <label class="titleName">国旗下讲话</label>
                                <label class="more"
                                    @click="$router.push({path:'/class/classWentInto/nationalFlagSpeech',query:{junmpType: 1,dictype:27}})">更多
                                    <i class="el-icon-arrow-right"></i></label>
                            </div>
                            <ul class="inner">
                                <li class="list" v-for="(item, index) in articleList27.list" :key="index">
                                    <span
                                        @click="$router.push({path:'/class/classWentInto/nationalFlagSpeech',query:{junmpType: 1,article:item}})">{{item.title}}</span>
                                    <span class="time">{{item.creationtime}}</span>
                                </li>
                            </ul>
                        </div>
                    </el-col>

                </el-row>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">教师风貌</label>
                        <label class="more"
                            @click="$router.push({path:'/class/classWentInto/teacherStyle',query:{junmpType: 2,dictype:23}})">更多
                            <i class="el-icon-arrow-right"></i></label>
                    </div>

                    <div class="campus">
                        <swiper :options="swiperOptionMultiple" ref="mySwiper">
                            <swiper-slide v-for="(item, index) in pictureList23.list" :key="index">
                                <div class="campusList">
                                    <img :src="item.pictureurl | pictureUrl" style="width: 100%; height:230px" />
                                    <p>{{item.describe}}</p>
                                </div>
                            </swiper-slide>
                            <div class="swiper-pagination" slot="pagination"></div>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>


                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">学生空间</label>
                        <label class="more">共{{homeExcellent6List.total}}名同学</label>
                    </div>
                    <ul class="goodBox clearFix">
                        <li class="goodList" v-for="(item,index) in homeExcellent6List.list" :key="index"
                            @click="goSpaceOthers(item)">
                            <div class="goodImg">
                                <el-avatar :size="60" :src="item.photo | pictureUrl" @error="errorHandler">
                                </el-avatar>
                            </div>
                            <label
                                :title="item.username">{{!item.username?item.username:item.username.length > 8? item.username.slice(0,8) + '...':item.username}}</label>
                            <!-- <label class="subjects">{{item}}</label> -->
                        </li>
                    </ul>
                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">优秀空间</label>
                        <label class="titleTab">
                            <span :class="titleActive===8?'titleActive':''" @click="titleActive=8">教师</span>
                            <el-divider direction="vertical"></el-divider>
                            <span :class="titleActive===6?'titleActive':' '" @click="titleActive=6">学生</span>
                            <el-divider direction="vertical"></el-divider>
                            <span :class="titleActive===9?'titleActive':' '" @click="titleActive=9">家长</span>
                        </label>
                        <label class="more">共{{homeExcellentEList.total > 20 ? 20 : homeExcellentEList.total}}名</label>
                    </div>
                    <ul class="goodBox clearFix">
                        <li class="goodList" v-for="(item,index) in homeExcellentEList.list" :key="index"
                            @click="goSpaceOthers(item)">
                            <div class="goodImg">
                                <el-avatar :size="60" :src="item.photo | pictureUrl" @error="errorHandler">
                                </el-avatar>
                            </div>
                            <label
                                :title="item.username">{{!item.username?item.username:item.username.length > 8? item.username.slice(0,8) + '...':item.username}}</label>
                        </li>
                    </ul>
                </div>

                <div class="warp">
                    <DynamicCurrency></DynamicCurrency>
                </div>

            </el-main>

            <el-aside class="rightBox">
                <div class="rightWarp">
                    <div class="title clearFix">
                        <label class="titleName">班级新闻</label>
                        <label class="more"
                            @click="$router.push({path:'/class/classWentInto/classNews',query:{junmpType: 1,dictype:26}})">更多
                            <i class="el-icon-arrow-right"></i></label>
                    </div>
                    <ul class="announcementList">
                        <li class="list" v-for="(item,index) in articleList26.list" :key="index">
                            <span
                                @click="$router.push({path:'/class/classWentInto/classNews',query:{junmpType: 1,article:item}})">{{item.title}}</span>
                            <span class="time">{{item.creationtime}}</span>
                        </li>
                    </ul>
                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">班级寄语</label>
                    </div>
                    <ul class="inner">
                        <li class="list" v-if=" articleList88.total > 0 && articleList88.list[0]">
                            <span>{{articleList88.list[0].title}}</span>
                            <div style="overflow-y: scroll;height:160px">
                            <p style="margin-left:30px"
                                v-html="articleList88.list[0].content?articleList88.list[0].content:''"></p>
                            </div>
                            <span class="time">{{articleList88.list[0].creationtime}}</span>
                        </li>
                    </ul>
                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">班级风采</label>
                        <label class="more"
                            @click="$router.push({path:'/class/classWentInto/classPhotoAlbum',query:{junmpType: 2,dictype:22}})">更多
                            <i class="el-icon-arrow-right"></i></label>
                    </div>
                    <div class="bannerWarp">
                        <swiper :options="swiperOption" ref="mySwiper">
                            <swiper-slide v-for="(item, index) in pictureList22.list" :key="index">
                                <div class="imgList">
                                    <img :src="item.pictureurl | pictureUrl" style="width: 100%;height: 100%;"
                                        :title="item.picturename" />
                                    <p class="imgName">{{item.describe}}</p>
                                </div>
                            </swiper-slide>
                            <div class="swiper-pagination" slot="pagination"></div>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">学生风采</label>
                        <label class="more"
                            @click="$router.push({path:'/class/classWentInto/studentElegant',query:{junmpType: 2,dictype:24}})">更多
                            <i class="el-icon-arrow-right"></i></label>
                    </div>
                    <div class="bannerWarp">
                        <swiper :options="swiperOption" ref="mySwiper">
                            <swiper-slide v-for="(item, index) in pictureList24.list" :key="index">
                                <div class="imgList">
                                    <img :src="item.pictureurl | pictureUrl" style="width: 100%;height: 100%;" />
                                    <p class="imgName">{{item.describe}}</p>
                                </div>
                            </swiper-slide>
                            <div class="swiper-pagination" slot="pagination"></div>
                            <div class="swiper-button-prev" slot="button-prev"></div>
                            <div class="swiper-button-next" slot="button-next"></div>
                        </swiper>
                    </div>
                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">访客统计</label>
                    </div>

                    <div class="statistics">
                        <div class="visitor clearFix">
                            <i class="el-icon-view"></i>
                            <label>今日来访</label>
                            <span class="number">{{todayTotals.total}}</span>
                        </div>
                        <div class="visitor clearFix">
                            <i class="el-icon-view"></i>
                            <label>总访问量</label>
                            <span class="number">{{visitorTotals.total}}</span>
                        </div>
                    </div>
                </div>

                <div class="warp">
                    <div class="title clearFix">
                        <label class="titleName">任课教师空间</label>
                        <label class="more">共{{homeExcellent8List.total}}名</label>
                    </div>
                    <ul class="goodBox clearFix">
                        <li class="goodList" v-for="(item,index) in homeExcellent8List.list" :key="index"
                            @click="goSpaceOthers(item)">
                            <div class="goodImg">
                                <el-avatar :size="60" :src="item.photo | pictureUrl" @error="errorHandler">
                                </el-avatar>
                            </div>
                            <label
                                :title="item.username">{{!item.username?item.username:item.username.length > 8? item.username.slice(0,8) + '...':item.username}}</label>
                        </li>
                    </ul>
                </div>
            </el-aside>
        </el-container>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import DynamicCurrency from '@c/space/DynamicCurrency'
    export default {
        components: {
            DynamicCurrency
        },
        computed: {
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        watch: {
            titleActive(val) {
                this.homeExcellent(val, 'excelent')
            }
        },
        created() {
            this.getVistorTotal('today')
            this.getVistorTotal('total')
            this.homeExcellent(8, 'excelent')
            this.homeExcellent(8)
            this.homeExcellent(6)
            this.articleSchool(25)
            this.articleSchool(88)
            this.articleSchool(26)
            this.articleSchool(21)
            this.articleSchool(31)
            this.articleSchool(27)
            this.pictureSchool(22)
            this.pictureSchool(23)
            this.pictureSchool(24)
            this.pictureSchool(42)
            this.pictureSchool(45)
        },
        data() {
            return {
                src: require('../../../assets/img/headportrait03.jpg'),
                students: [],
                titleActive: 8,
                teacher: [],
                homeExcellent6List: {},
                homeExcellent8List: {},
                homeExcellentEList: {},
                articleList88: {}, //详细查数据库字段
                articleList25: {},
                articleList26: {},
                articleList21: {},
                articleList31: {},
                articleList27: {},
                pictureList23: {},
                pictureList24: {},
                pictureList22: {},
                pictureList45: {},
                swiperOption: {
                    loop: false,
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 3,
                    centeredSlides: true,
                    effect: "fade",
                    paginationClickable: true,
                    // pagination: {
                    //     el: '.swiper-pagination'
                    // },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e) {}
                    }
                },
                imgList: [{
                        id: '001',
                        imgUrl: require("../../../assets/img/headportrait01.jpg"),
                        name: "精彩作业"
                    },
                    {
                        id: '002',
                        imgUrl: require("../../../assets/img/headportrait02.jpg"),
                        name: "精彩瞬间"
                    },
                    {
                        id: '003',
                        imgUrl: require("../../../assets/img/headportrait03.jpg"),
                        name: "精彩操作"
                    }
                ],
                swiperOptionMultiple: {
                    loop: false,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 4,
                    spaceBetween: 30,
                    // pagination: {
                    //     el: '.swiper-pagination'
                    // },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        tap: function (e) {}
                    }
                },
                imgArr: [{
                    id: 1,
                    imgUrl: require('../../../assets/img/calligraphy01.jpg'),
                    detail: "吉首市第二届书法大赛"
                }, {
                    id: 2,
                    imgUrl: require('../../../assets/img/calligraphy02.jpg'),
                    detail: "吉首市第二届书法大赛"
                }, {
                    id: 3,
                    imgUrl: require('../../../assets/img/calligraphy03.jpg'),
                    detail: "吉首市第二届书法大赛"
                }, {
                    id: 4,
                    imgUrl: require('../../../assets/img/calligraphy04.jpg'),
                    detail: "吉首市第二届书法大赛"
                }, {
                    id: 5,
                    imgUrl: require('../../../assets/img/calligraphy05.jpg'),
                    detail: "吉首市第二届书法大赛"
                }],
                todayTotals: {},
                visitorTotals: {}
            }
        },
        methods: {
            // 获取访问数量
            getVistorTotal(params) {
                if (params == 'today') {
                    this.$store.dispatch('visitorAllModule/visitorPageToday', {
                        userId: this.otherUserInfo.id || this.otherUserInfo.userid,
                        hisUserId: this.otherUserInfo.id || this.otherUserInfo.userid
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.todayTotals = res.data.result
                        }
                    })
                } else {
                    this.$store.dispatch('visitorAllModule/visitorPageTotal', {
                        userId: this.otherUserInfo.id || this.otherUserInfo.userid,
                        hisUserId: this.otherUserInfo.id || this.otherUserInfo.userid
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.visitorTotals = res.data.result
                        }
                    })
                }
            },
            // 去他人空间
            goSpaceOthers(others) {
                this.$store.dispatch('commonModule/checkVisitor', {
                    userId: others.userid
                }).then(res => {
                    if (res.data.code == 200 || this.userInfo.id == others.userid) {
                        this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                        if (others) {
                            if (this.userInfo.id == others.userid) {
                                this.$store.commit('commonModule/INIT_ISMANAGER', true);
                            } else {
                                this.$store.commit('commonModule/INIT_ISMANAGER', false);
                            }
                            // 学校9527 班级1000 教研100011
                            if (others.roleid == 7) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/school/schoolHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 1000) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/class/classHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 100011) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/research/researchOther/researchOtherHome",
                                    query: {
                                        others: others
                                    }
                                });
                            } else {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/otherZone/otherZoneHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            }
                        }
                    } else {
                        this.$message.warning('没有访问权限!')
                    }
                })
            },
            homeExcellent(params, type) {
                console.log(this.otherUserInfo)
                this.$store.dispatch('homeModule/homeExcellent', {
                    limit: type == 'excelent'? 20 : params =='8'?90:20,
                    page: 1,
                    isClass: 'Class',
                    roleId: params,
                    isExcellent: type ? type : false,
                    schoolid: this.otherUserInfo.id || this.otherUserInfo.userid,
                    isClass: 'Class'
                }).then(res => {
                    if (res.data.code == 200) {
                        if (type == 'excelent') {
                            this.homeExcellentEList = res.data.result
                        } else {
                            switch (params) {
                                case 6:
                                    this.homeExcellent6List = res.data.result
                                    break
                                case 8:
                                    this.homeExcellent8List = res.data.result
                                    break
                            }
                        }
                    }
                })
            },
            pictureSchool(params) {
                this.$store.dispatch('photoalbumModule/pictureSchool', {
                    hisUserId: this.otherUserInfo.id || this.otherUserInfo.userid,
                    schoolid: this.otherUserInfo.xxdm,
                    classifyid: null,
                    dictype: params,
                    draft: 1,
                    limit: 15,
                    page: 1,
                    search: null,
                    sortType: 0,
                    userid: null,
                    yearandmonth: null
                }).then(res => {
                    if (res.data.code == 200) {
                        switch (params) {
                            case 23:
                                this.pictureList23 = res.data.result
                                break
                            case 24:
                                this.pictureList24 = res.data.result
                                break
                            case 22:
                                this.pictureList22 = res.data.result
                                break
                            case 45:
                                this.pictureList45 = res.data.result
                                break
                        }
                    }
                })
            },
            articleSchool(params) {
                this.$store.dispatch('articleModule/articleSchool', {
                    hisUserId: this.otherUserInfo.userid || this.otherUserInfo.id || this.otherUserInfo
                        .affiliatedId,
                    schoolid: this.otherUserInfo.xxdm,
                    classifyid: null,
                    dictype: params,
                    draft: 1,
                    limit: 7,
                    page: 1,
                    search: null,
                    sortType: 0,
                    userid: null,
                    yearandmonth: null
                }).then(res => {
                    if (res.data.code == 200) {
                        switch (params) {
                            case 88:
                                this.articleList88 = res.data.result
                                break
                            case 25:
                                this.articleList25 = res.data.result
                                break
                            case 26:
                                this.articleList26 = res.data.result
                                break
                            case 21:
                                this.articleList21 = res.data.result
                                break
                            case 31:
                                this.articleList31 = res.data.result
                                break
                            case 27:
                                this.articleList27 = res.data.result
                                break
                        }
                    }
                })
            },
            errorHandler() {
                return true
            },
            goHome() {
                this.$router.push({
                    path: "/"
                })
            },

            openFullScreen2() {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 2000);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .schoolHomePageBox {
        width: 100%;

        .goHome {
            font-size: 14px;
            color: #303133;
            text-align: left;
            padding-left: 10px;
            margin-top: 20px;

            label {
                cursor: pointer;
                user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;

                i {
                    margin-right: 5px;
                }
            }
        }

        .mainBox {
            padding: 20px 20px 20px 0;
        }

        .title {
            box-sizing: border-box;
            padding-bottom: 8px;
            color: #303133;
            border-bottom: 1px solid #ccc;

            .titleTab {
                float: left;
                margin-left: 30px;
                font-size: 14px;
                color: #303133;
                margin-top: 3px;

                span {
                    cursor: pointer;
                }

                .titleActive {
                    color: #409EFF;
                }
            }

            label {
                display: block;
            }

            .titleName {
                font-size: 16px;
                float: left;
            }

            .more {
                font-size: 14px;
                float: right;
                margin-top: 5px;
                cursor: pointer;
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                -khtml-user-select: none;
                user-select: none;
                color: #909399;
            }
        }

        .card {
            background-color: white;
            box-sizing: border-box;
            padding: 10px;

            .announcement {
                margin-top: 15px;

                .imgBox {
                    float: left;
                    width: 192px;
                    height: 192px;
                    overflow: hidden;
                }

                .announcementList {
                    float: right;
                    width: calc(100% - 205px);

                    .list {
                        cursor: pointer;
                        font-size: 14px;
                        color: #303133;
                        text-align: left;
                        margin-bottom: 10px;

                        .type {
                            color: #909399;
                        }

                        .time {
                            float: right;
                            font-size: 12px;
                            color: #909399;
                        }
                    }
                }
            }
        }

        .warp {
            background-color: white;
            margin-top: 15px;
            box-sizing: border-box;
            padding: 10px;

            .inner {
                height: 202px;
                margin-top: 10px;

                .list {
                    cursor: pointer;
                    font-size: 14px;
                    color: #303133;
                    text-align: left;
                    margin-bottom: 10px;

                    .time {
                        float: right;
                        font-size: 12px;
                        margin-top: 5px;
                        color: #909399;
                    }
                }
            }

            .features {
                box-sizing: border-box;
                padding: 0 10px;
                margin-top: 10px;

                .featuresList {
                    width: 185px;
                    margin-bottom: 10px;
                    margin-right: 10px;
                    font-size: 14px;
                    color: #303133;
                    text-align: center;
                    float: left;

                    .imgBox {
                        width: 100%;
                    }
                }
            }

            .students {
                box-sizing: border-box;
                padding: 10px;

                .studentList {
                    width: 76px;
                    text-align: left;
                    float: left;
                    font-size: 14px;
                    cursor: pointer;
                    color: #303133;
                    margin-bottom: 10px;
                    margin-right: 10px;

                    label {
                        cursor: pointer;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        -khtml-user-select: none;
                        user-select: none;
                    }
                }
            }

            .dynamicList {
                margin: 10px;

                .avatar {
                    float: left;

                    label {
                        display: block;
                        font-size: 14px;
                        color: #303133;
                    }
                }

                .dyContent {
                    width: calc(100% - 65px);
                    float: left;
                    margin-left: 10px;

                    p {
                        margin-block-start: 0;
                        margin-block-end: 0;
                        text-align: justify;
                        color: #303133;
                        font-size: 14px;
                        margin: 10px 0;
                    }

                    .imgWarp {
                        .imgList {
                            float: left;
                            width: 182px;
                            height: 182px;
                            margin-right: 10px;
                            margin-bottom: 10px;
                        }
                    }

                    .timeWarp {
                        .time {
                            font-size: 12px;
                            color: #303133;
                            float: left;
                            color: #909399;
                        }

                        .comment {
                            float: right;

                            label {
                                font-size: 14px;
                                color: #303133;
                                cursor: pointer;
                            }
                        }
                    }
                }

            }

            .bannerWarp {
                width: 100%;
                height: 230px;
                margin-top: 10px;

                .imgList {
                    width: 100%;
                    height: 240px;
                    position: relative;

                    .imgName {
                        position: absolute;
                        left: 0;
                        bottom: 10px;
                        box-sizing: border-box;
                        padding: 10px 0;
                        width: 100%;
                        background-color: rgba(255, 255, 255, .6);
                        font-size: 14px;
                        color: #303133;
                        z-index: 10;
                    }
                }
            }

            .statistics {
                margin-top: 10px;

                .visitor {
                    margin-bottom: 10px;
                    text-align: left;
                    font-size: 14px;
                    color: #303133;

                    .number {
                        float: right;
                    }

                    label {
                        margin-left: 5px;
                    }
                }
            }

            .goodBox {
                box-sizing: border-box;
                padding: 6px 0;

                .goodList {
                    width: 120px;
                    float: left;
                    margin-left: 12px;
                    margin-bottom: 10px;

                    label {
                        display: block;
                        font-size: 14px;
                        color: #303133;
                    }

                    .subjects {
                        color: #909399;
                    }
                }
            }
        }

        .rightBox {
            box-sizing: border-box;
            padding: 20px 0;

            .rightWarp {
                background-color: white;
                box-sizing: border-box;
                padding: 10px;

                .announcementList {
                    margin-top: 10px;
                    box-sizing: border-box;
                    padding-bottom: 5px;
                    height: 202px;

                    .list {
                        cursor: pointer;
                        font-size: 14px;
                        color: #303133;
                        text-align: left;
                        margin-bottom: 10px;

                        .time {
                            float: right;
                            font-size: 12px;
                            margin-top: 5px;
                            color: #909399;
                        }
                    }
                }
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }

        .campus {
            height: 230px;
            margin-top: 10px;

            .campusList {
                width: auto;
                text-align: center;
                font-size: 14px;
                color: #303133;

                p {
                    margin-block-start: 0;
                    margin-block-end: 0;
                }
            }
        }


        ul {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
        }

    }
</style>